<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三亚地图 - 深蓝主题</title>
    <link rel="stylesheet" href="css/style.css">
    <!-- 天地图API -->
    <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=e5076cd5fc078a8ff411a2101f52bb6d"></script>
    <!-- D3.js库 -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>海南省三亚市地图</h1>
            <p>深蓝主题展示</p>
        </div>
        
        <div class="map-wrapper">
            <div id="mapDiv" class="map-container"></div>
        </div>
        
        <div class="info">
            <p>演示DEMO - 基于天地图API + D3.js</p>
        </div>
    </div>

    <script src="js/map.js"></script>
</body>
</html> 